import QtQuick 2.6
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.2
import QtMultimedia 5.5

import "../../../Base/UiBase"
import "../../../Base/Config"
import Code 1.0

import Cpp.Type 1.0

Rectangle {
    id: root

    property string type

    property int postId
    property alias headSource: head.headSource
    property alias name: head.usernameText
    property alias subject: head.subject
    property alias time: head.postTime
    property alias province: head.province
    property alias city: head.city
    property int imageCount
    property alias imageSource: imageShow.source
    property alias audioSource: audioPlayer.source
    property alias comment: commentLabel.text

    height: 541 * Size.ratio
    color: Color.foreground

    ColumnLayout {
        id: contentColumn

        width: parent.width
        height: parent.height
        spacing: 0

        Header {
            id: head
            Layout.fillWidth: true
        }

        ColumnLayout {
            id: mainContent

            Layout.fillWidth: true
            Layout.fillHeight: true

            spacing: 0

            SvgzImage {
                id: imageShow

                Layout.fillWidth: true
                Layout.maximumHeight: imageCount === 0 ? 40 * Size.ratio : 324
                                                            * Size.ratio
                Layout.minimumHeight: imageCount === 0 ? 40 * Size.ratio : 324
                                                            * Size.ratio
                fillMode: SvgzImage.PreserveAspectCrop
                visible: subject !== Subject.Music

                Text {
                    anchors {
                        right: parent.right
                        bottom: parent.bottom
                    }
                    visible: imageCount > 1
                    text: "+" + String(imageCount) + "张图"
                    font.pixelSize: Size.normalFont
                    Rectangle {
                        z: -1
                        anchors.fill: parent
                        color: Qt.rgba(1, 1, 1, 0.35)
                        radius: 10 * Size.ratio
                    }
                }
                Item {
                    id: triangleType
                    anchors.top: parent.top
                    anchors.right: parent.right
                    width: triangleText.height * 1.4142135623730950488016887242097
                           + triangleText.width / 1.4142135623730950488016887242097
                    height: width
                    visible: subject === Subject.Paint

                    clip: true
                    Rectangle {
                        width: parent.width * 1.5
                        height: parent.height * 1.5
                        transformOrigin: Item.TopLeft
                        rotation: -45
                        color: Color.paint
                    }
                    Text {
                        id: triangleText
                        x: height * 1.4142135623730950488016887242097
                        width: Size.smallFont * 2 + 1
                        height: contentHeight
                        rotation: 45
                        transformOrigin: Item.TopLeft
                        text: type
                        font.pixelSize: Size.smallFont
                        color: Color.foreground
                        wrapMode: Text.WrapAnywhere
                    }
                }
                Rectangle {
                    id: rectangleType
                    anchors.top: parent.top
                    anchors.right: parent.right
                    width: 150 * Size.ratio
                    height: 40 * Size.ratio
                    visible: subject === Subject.Pe

                    color: Color.pe
                    Text {
                        anchors.centerIn: parent
                        text: type
                        font.pixelSize: Size.smallFont
                        color: Color.foreground
                    }
                }
            } // end image

            SvgzImage {
                id: musicShow
                property bool playing: audioPlayer.playbackState === Audio.PlayingState

                width: 355 * Size.ratio
                height: 324 * Size.ratio
                visible: subject === Subject.Music
                source: "../../../../resources/evaluation/multi/music/player/liushengji.svg"

                Audio {
                    id: audioPlayer
                }

                Item {
                    id: animation
                    y: 27 * Size.ratio
                    width: 250 * Size.ratio
                    height: 250 * Size.ratio
                    anchors.horizontalCenter: parent.horizontalCenter

                    SvgzImage {
                        id: frame0
                        width: 250 * Size.ratio
                        height: 250 * Size.ratio
                        source: "../../../../resources/evaluation/multi/music/player/chushi.svg"
                        visible: true
                    }
                    SvgzImage {
                        id: frame1
                        width: 250 * Size.ratio
                        height: 250 * Size.ratio
                        source: "../../../../resources/evaluation/multi/music/player/donghua01.svg"
                        visible: true
                    }
                    SvgzImage {
                        id: frame2
                        width: 250 * Size.ratio
                        height: 250 * Size.ratio
                        source: "../../../../resources/evaluation/multi/music/player/donghua02.svg"
                        visible: false
                    }
                    SvgzImage {
                        id: frame3
                        width: 250 * Size.ratio
                        height: 250 * Size.ratio
                        source: "../../../../resources/evaluation/multi/music/player/donghua03.svg"
                        visible: false
                    }
                    SvgzImage {
                        id: frame4
                        width: 250 * Size.ratio
                        height: 250 * Size.ratio
                        source: "../../../../resources/evaluation/multi/music/player/donghua04.svg"
                        visible: false
                    }
                    SvgzImage {
                        id: frame5
                        width: 250 * Size.ratio
                        height: 250 * Size.ratio
                        source: "../../../../resources/evaluation/multi/music/player/donghua05.svg"
                        visible: false
                    }
                }
                SvgzImage {
                    width: 70 * Size.ratio
                    height: 220 * Size.ratio
                    anchors.right: parent.right
                    anchors.rightMargin: 38 * Size.ratio
                    source: "../../../../resources/evaluation/multi/music/player/ganzi01.svg"

                    transform: Rotation {
                        id: rotater
                        angle: musicShow.playing ? 11.1 : 0
                        origin.x: 32 * Size.ratio
                        origin.y: 56 * Size.ratio
                        Behavior on angle {
                            NumberAnimation {
                                easing.type: Easing.OutCubic
                                duration: 1000
                            }
                        }
                    }
                }

                Timer {
                    property int index: 0
                    interval: 150
                    repeat: true
                    running: musicShow.playing
                    onTriggered: {
                        var newIndex = (index + 1) % animation.data.length
                        animation.data[newIndex].visible = true
                        animation.data[index].visible = false
                        index = newIndex
                    }
                }

                Text {
                    anchors.centerIn: animation
                    text: type
                    font.pixelSize: Size.titleFont
                    color: Color.foreground
                }
                MouseArea {
                    anchors.fill: animation
                    onClicked: musicShow.playing ? audioPlayer.pause() : audioPlayer.play()
                }

                // play controller
                RowLayout {
                    width: parent.width
                    height: 45 * Size.ratio
                    anchors.bottom: parent.bottom
                    Text {
                        Layout.preferredWidth: 65 * Size.ratio
                        height: parent.height
                        text: Helper.msToReadable(audioPlayer.position)
                        font.pixelSize: Size.smallFont
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                    }
                    Slider {
                        Layout.fillHeight: true
                        Layout.fillWidth: true

                        minimumValue: 0
                        maximumValue: audioPlayer.duration

                        onValueChanged: {
                            audioPlayer.seek(value)
                            value = Qt.binding(function(){return audioPlayer.position})
                        }

                        style: SliderStyle {
                            groove: Rectangle {
                                implicitWidth: parent.width
                                implicitHeight: 5 * Size.ratio
                                color: Color.darkRed
                            }
                            handle: Rectangle {
                                implicitWidth: 20 * Size.ratio
                                implicitHeight: implicitWidth
                                radius: width / 2
                                color: Color.darkRed
                            }
                        }
                    }

                    Text {
                        Layout.preferredWidth: 65 * Size.ratio
                        height: parent.height
                        text: Helper.msToReadable(audioPlayer.duration)
                        font.pixelSize: Size.smallFont
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                    }
                } // end play controller
            } // end music player

            Text {
                id: commentLabel

                Layout.fillHeight: true
                Layout.fillWidth: true
                padding: 10 * Size.ratio
                font.pixelSize: Size.normalFont
                wrapMode: Text.Wrap
                elide: Text.ElideRight
            } // end comment
        }

        Footer {
            id: foot

            postId: root.postId
            type: root.subject === Subject.Music ? "audio" : "image"
            text: root.comment
            source: root.subject === Subject.Music ? root.audioSource : root.imageSource
            Layout.alignment: Qt.AlignBottom
            Layout.fillWidth: true
            Layout.preferredHeight: height
        }
    }
}
